<template>
  <div class="content">
    <div class="box">
    	<div class="title">
    		公众墙信息发布系统
    	</div>
		<el-form label-position="left" label-width="80px" class="form">
		  <el-form-item label="手机">
		    <el-input v-model="phone"></el-input>
		  </el-form-item>
		  <el-form-item label="密码">
		    <el-input v-model="password" type="password"></el-input>
		  </el-form-item>
		</el-form>
		<div class="btn">
			<div class="tip text-danger" v-text="tip">用户名或密码错误</div>
		    <el-button type="primary" @click="onSubmit">登录</el-button>
		</div>
    </div>
  </div>
</template>

<script>
// @ 是 /src 的别名
export default {
  name: 'UserLogin',
  props: {

  },
	data() {
		return {
			tip: '',
			phone:'',
			password: ''
		}
	},
	methods:{
		onSubmit() {
			if(this.phone.trim()==''){
				this.tip="请输入手机号"
				return;
			}
			if(this.password.trim()==''){
				this.tip="请输入密码"
				return;
			}
			this.axios.get('/admin/loginAdmin?phone='+this.phone+'&password='+this.password)
			.then((res)=>{
				console.log(res.data.data)
				localStorage.setItem("token",res.data.data.token)
				localStorage.setItem("userInfo",JSON.stringify(res.data.data.userInfo))
				this.axios.defaults.headers.token = localStorage.getItem("token");
				this.$router.push('/notice')
				// console.log(localStorage.getItem("token"));//输出
			})
			.catch(()=>{
				this.tip="用户名或密码错误"
			})
		}
	}
}
</script>

<style scoped lang="styl">

	page{

	}
	.content
		display flex
		justify-content center
		align-items center
		height 100vh
		background: url(../../assets/loginBg.svg) 50% no-repeat
		background-size: cover
		.box
			width 350px
			/*height 400px*/
			background #fff
			box-shadow 14px 18px 38px rgba(0,0,0,.3)
			border-radius 25px
			padding 40px 50px
			.title
				margin-bottom 30px
				text-align center
				font-size 25px
			.btn
				display flex
				justify-content space-between
				.tip
					line-height 40px
</style>
